<script>
import { adminList, addAdmin, updateAdmin, delAdmin } from '@/api/user'
//导入路由的配置规则
import { routes } from '@/router/index'
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 当前页码
      currentPage: 1,
      drawer: false,

      menus: routes[0].children,

      //收集管理员数据的对象
      formData: {
        adminname: '',
        password: '',
        role: '',
        checkedKeys: []
      },
      // 默认被选中的内容
      defaultCheckedKeys: [],
      interfaceType: '10086' //10086是添加管理员  10010是编辑管理员
    }
  },
  mounted() {
    //发送请求
    adminList().then(res => {
      // console.log(res)

      // 获取请求的数据
      this.tableData = res.data
    })
  },
  methods: {
    //关闭抽屉的回调事件
    // 清空所有的表单的内容
    close() {
      this.formData = {
        adminname: '',
        password: '',
        role: '',
        checkedKeys: []
      }

      // 清除掉默认选中内容
      this.defaultCheckedKeys = []

      //清除掉树形结构中已经选中的效果
      this.$refs.treeRef.setCheckedKeys([])
    },

    //添加按钮弹出抽屉效果
    addClick() {
      this.drawer = true
      this.interfaceType = '10086'
    },

    // ===============================================================================
    // 用来获取树形结构中被选中的内容
    formmatCheckedKeys() {
      // console.log(this.$refs.treeRef.getCheckedNodes(true))
      //获取到被选中的节点
      const list = this.$refs.treeRef.getCheckedNodes(true)
      // console.log(this.menus)

      // console.log('1111111111111111111', list)

      //用来放父级路由的 label 用的
      const tempList = []
      //放最终结果用的
      const result = []

      list.forEach(item => {
        // item就是前我们选中的路由当
        // 第一次执行时 item 是管理员列表 ----找到父节点  账号管理
        // 第一次执行的时候 result中就有了 账号管理和管理员列表的路由
        // 第二次执行的时候 item 就是用户列表

        //根据子节点来获取到父级路由
        const parent = this.menus.find(myitem => {
          return myitem.children.some(child => child.label == item.label)
        })

        //已经可以正常获取到父级路由了
        // console.log(parent)

        if (tempList.includes(parent.label)) {
          //如果条件成立,就直接找到父级路由,在子路由中添加一个子路由
          result.find(item => item.label == parent.label).children.push(item)
        } else {
          //如果没有该父级路由,就将其添加进去
          tempList.push(parent.label)

          result.push({
            label: parent.label,
            path: parent.path,
            children: [item]
          })
        }

        // console.log(result)

        // 将路由权限添加到formData中
        this.formData.checkedKeys = result
      })
    },
    // ==================================================================================

    //添加
    add() {
      this.formmatCheckedKeys()

      // console.log(this.formData)

      //调用请求将 formData 传递过去
      addAdmin(this.formData).then(res => {
        // console.log(res)

        // 关闭抽屉效果
        this.drawer = false

        //添加成功之后,重新获取列表
        adminList().then(res => {
          // console.log(res)
          // 获取请求的数据
          this.tableData = res.data
        })
      })
    },

    //编辑
    editClick(row) {
      // console.log(row)

      // 打开抽屉效果
      this.drawer = true
      this.interfaceType = '10010'

      this.formData.adminname = row.adminname
      this.formData.password = ''
      this.formData.role = row.role

      // 放被选中的内容
      const checkedKeys = []
      row.checkedKeys.forEach(parent => {
        parent.children.forEach(item => {
          checkedKeys.push(item.path)
        })
      })

      // 记录所有被选中的内容
      this.defaultCheckedKeys = checkedKeys
      // console.log(checkedKeys)
    },
    // 提交编辑按钮的点击事件
    update() {
      // updateAdmin()
      if (this.formData.adminname == '' || this.formData.password == '') {
        ElMessage.error('管理员名称和密码不能为空!')
        return
      }

      // 获取被选中的内容
      this.formmatCheckedKeys()
      // console.log(this.formData)

      //发送数据请求,可以帮我们把最新的数据传递过去
      updateAdmin(this.formData).then(res => {
        //更新数据时,管理员账号和密码不能被修改

        // console.log(res)
        // 关闭抽屉效果
        this.drawer = false

        //添加成功之后,重新获取列表
        adminList().then(res => {
          // console.log(res)
          // 获取请求的数据
          this.tableData = res.data
        })
      })
    },
    //删除按钮的点击事件
    deleteClick(row) {
      // console.log(row)

      // confirm 弹出一个确认删除框
      if (confirm('您确定要删除数据吗?')) {
        delAdmin({ adminid: row.adminid }).then(res => {
          if (res.code == '200') {
            ElMessage.success('删除成功,加载最新数据中~')
            adminList().then(res => {
              // console.log(res)
              // 获取请求的数据
              this.tableData = res.data
            })
          } else {
            ElMessage.error('删除失败,请稍后重试...')
          }
        })
      }
    }
  },
  computed: {
    // 根据当前页码获取到当前页的数据
    computedTableData() {
      return this.tableData.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
    }
  }
}
</script>
<template>
  <div>
    <div class="header">
      管理员列表
      <el-button type="primary" @click="addClick">添加管理员</el-button>
    </div>
    <!-- --------------------------表格数据渲染---------------------------- -->
    <el-table :data="computedTableData" style="width: 100%">
      <el-table-column type="index" :index="(currentPage - 1) * 10 + 1" label="序号" width="180" align="center" />
      <el-table-column prop="adminname" label="管理员的名称" width="180" align="center" />
      <el-table-column prop="role" label="管理员权限" width="180" align="center">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.role === 1">管理员</el-tag>
          <el-tag v-else>超级管理员</el-tag>
        </template>
      </el-table-column>>
      <el-table-column label="操作" align="center">
        <!-- <el-button>编辑</el-button> -->
        <template #default="scope">
          <div>
            <el-button type="primary" @click="editClick(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteClick(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>>
    </el-table>

    <!-- ------------------做分页显示用的------------------------ -->
    <el-pagination background layout="prev, pager, next" :total="tableData.length" v-model:current-page="currentPage" />

    <!-- -------------------抽屉效果------------------------------------------ -->
    <el-drawer v-model="drawer" @close="close">
      <template #header>
        <h4> {{ interfaceType == '10086' ? "添加管理员" : "编辑管理员" }} </h4>
      </template>

      <el-form-item label="管理员账号">
        <el-input placeholder="请输入管理员账号" v-model="formData.adminname" />
      </el-form-item>
      <el-form-item label="管理员密码">
        <el-input placeholder="请输入管理员密码" v-model="formData.password" />
      </el-form-item>
      <el-form-item label="管理员角色">
        <el-select placeholder="请选择角色" v-model="formData.role">
          <el-option label="管理员" :value="1" />
          <el-option label="超级管理员" :value="2" />
        </el-select>
      </el-form-item>
      <!-- ===================================================================================================================== -->

      <!-- 树形控件 -->
      <el-form-item>
        <el-tree ref="treeRef" node-key="path" :default-checked-keys="defaultCheckedKeys" :data="menus" show-checkbox :default-expand-all="true" />
      </el-form-item>
      <!-- ===================================================================================================================== -->
      <el-button v-if="interfaceType == '10086'" @click="add">添加</el-button>
      <el-button v-else @click="update">编辑(提交)</el-button>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.header {
  margin-bottom: 16px;
}
</style>